import React, {Component} from 'react'
import {connect} from 'react-redux'
import {NavBar, List, InputItem, Grid, Icon} from 'antd-mobile'
import QueueAnim from 'rc-queue-anim'


import {sendMsg, readMsg} from '../../redux/actions'



const Item = List.Item
/* 聊天组件 */
class Chat extends Component{

    state = {
        content: '',
        isShow: false   // 是否显示表情列表
    }

    // 在第一次调用render() 之前执行
    componentWillMount() {
        // 初始化表情列表数据
        const emojis = ['❤', '😍', '😂','⚽', '😁', '🤣','😇', '😘', '🤔','😶', '😒', '😬','🤥'
                ,'😌', '😔','😪', '😴', '🤤','😷', '🤢', '🤮','🤧', '🥵', '🥶'
                ,'🥴', '💏','💔', '🧡', '💛','💚', '💙', '💜','🌻', '🌴', '☀'
                ,'🤙', '👉','👇', '☝', '👊','👌', '🖐', '🍓','🥝', '🍉', '🍎']
        // 上面的这个 emojis 数组不能直接使用
        this.emojis = emojis.map(emoji => ({text:emoji}))
    }

     // 进入聊天界面时,  消息显示要到底部
     componentDidMount() {
        // 初始化显示列表
        window.scrollTo(0, document.body.scrollHeight)

     }



    // 发送消息时,也要显示到底部, 显示最新发送的消息
    componentDidUpdate () {
        // 更新列表显示
        window.scrollTo(0, document.body.scrollHeight)
    }


     /*退出的回调函数之前  修改未读的消息状态为已读  */
    componentWillUnmount() {
        // 发送请求更新消息的未读状态
         //targetId 目标 聊天对象的id
        const from = this.props.match.params.userid
        const to = this.props.user._id
        this.props.readMsg(from, to)
    }

    // 输入时  表情库要显示出来
    toggleShow = () => {
        const isShow = !this.state.isShow
        this.setState({isShow})
        // 解决表情库显示的bug
        if (isShow) {
            // 异步手动派发resize事件
            setTimeout(() => {
                window.dispatchEvent(new Event('resize'))
            }, 0)
        }
    }


    // 处理发送消息
   handleSend = () => {
       const from = this.props.user._id
       // 这个userid 是在指定路由的时候映射的路径
       const to = this.props.match.params.userid
       // 收集数据   --  发送的消息
       const content = this.state.content.trim()

        // 发送请求(发消息)
       if (content) {
           this.props.sendMsg({from, to, content})
       }
        // 发送消息之后,清除输入的数据
       this.setState({
           content: '',
           isShow: false
       })
   }


    render() {
        // debugger
        const {user} = this.props
        /* chatMsgs包含的是我跟所有人聊过天的信息  */
        const {users, chatMsgs} = this.props.chat

        /*console.log('---------------------')
        console.log(users)
        console.log(chatMsgs)
        console.log('---------------------')*/

        // 计算当前聊天的chatId
        // 当前用户的id
        const meId = user._id
        // debugger
        if (!users[meId]) {  // 如果还没有获取到数据,直接返回,不做任何显示
            // 发送请求之后,当前这个组件会重新渲染
            return null
        }

        /*console.log('---------------------')
        console.log(users)
        console.log(chatMsgs)
        console.log('---------------------')*/

        // b=目标聊天对象的id
        const targetId = this.props.match.params.userid

        const chatId = [meId, targetId].sort().join('_')

        // 很可能双鱼座的男生都比较喜欢你这种类型

        // 需要对 chatMsgs进行过滤
        // 过滤之后这里面的msgs有我发给对方的,也有对方发给我的
        const msgs = chatMsgs.filter(msg => msg.chat_id===chatId)

        // 得到目标用户的header图片对象   注意是使用 []
        const targetHeader = users[targetId].header

        /*如果对方没有完善信息  那么这里的require获取到空的数据之后会报错  */
        const targetIcon = targetHeader ? require(`../../assets/images/${targetHeader}.png`) : null


        return (
        <div id='chat-page'>
            <NavBar icon={<Icon type='left'/>}
                    mode="dark" className='sticky-header'
                    onLeftClick={()=> this.props.history.goBack()}
            >{users[targetId].username}</NavBar>
            <List style={{marginTop: 10, marginBottom: 50}}>
                {/*alpha left right top bottom scale scaleBig scaleX scaleY*/}
                <QueueAnim type='left' delay={100}>
                    {
                        msgs.map(msg => {
                            if (targetId===msg.from) { // 对方发给我的
                                return(
                                   <Item
                                       key={msg._id}
                                       thumb={targetIcon}>
                                       {msg.content}
                                   </Item>
                                )
                            } else {  // 我发给对方的消息
                                return(
                                    <Item
                                        key={msg._id}
                                        className='chat-me' extra='我'>
                                        {msg.content}
                                    </Item>
                                )
                            }
                        })
                    }
                </QueueAnim>

            </List>

            <div className='am-tab-bar'>
                <InputItem placeholder='请输入'
                           value={this.state.content}
                           onChange={val => this.setState({content:val})}
                           onFocus={() => this.setState({isShow: false})}
                    extra={
                        <span>
                            <span onClick={this.toggleShow}
                                  style={{marginRight:5}}>😗</span>
                            <span onClick={this.handleSend}>发送</span>
                        </span>
                    }
                />
                {this.state.isShow ? (
                    <Grid
                      data={this.emojis}
                      columnNum={8}
                      carouselMaxRow={4}
                      isCarousel={true}
                      onClick={(item) => {
                        this.setState({content: this.state.content + item.text})
                      }}
                    />
                ) : null}

            </div>
        </div>
        )
    }
}

export default connect(
    state => ({user: state.user, chat: state.chat}),
    {sendMsg, readMsg}
)(Chat)

